<script setup lang="ts">
import { getAddressDetailApi, saveAddressApi, updateAddressDetailApi } from '@/api/address';
import { getAddressApi, getAddressTokenApi } from '@/api/getAddressApi';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue'
// 获取页面参数
const query = defineProps<{
  id?: string
}>()

// 动态设置标题
uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新建地址' })

// 获取地址页详情数据
const getAddressData = async ()=>{
  if(query.id){
    const res = await getAddressDetailApi(query.id!)
    console.log(res,'++')
    Object.assign(form.value, res.result)
  }
}

// 表单数据
const form = ref({
  receiver: '', // 收货人
  contact: '', // 联系方式
  fullLocation: '', // 省市区(前端展示)
  provinceCode: '', // 省份编码(后端参数)
  cityCode: '', // 城市编码(后端参数)
  countyCode: '', // 区/县编码(后端参数)
  address: '', // 详细地址
  isDefault: 0, // 默认地址，1为是，0为否
})

// 定义校验规则
const rules = {
  receiver: {
    // name 字段的校验规则
		rules:[
			// 校验 name 不能为空
			{
				required: true,
				errorMessage: '请填写收货人姓名',
			}
		]
  },
  contact: {
    // name 字段的校验规则
		rules:[
			// 校验 name 不能为空
			{
				required: true,
				errorMessage: '请填写收货人手机号码',
			},
      {
        pattern: /^1[3-9]\d{9}$/,
        errorMessage: '手机号码格式不正确'
      }
		]
  },
  countyCode: {
    // name 字段的校验规则
		rules:[
			// 校验 name 不能为空
			{
				required: true,
				errorMessage: '请选择省/市/区(县)',
			}
		]
  },
  address: {
    // name 字段的校验规则
		rules:[
			// 校验 name 不能为空
			{
				required: true,
				errorMessage: '请填写街道、楼牌号等信息',
			}
		]
  }
}

// 获取表单组件实例
const formRef = ref<UniHelper.UniFormsInstance>()
// #ifdef MP-WEIXIN
// 收集所在地区
const onRegionChange: UniHelper.RegionPickerOnChange = (ev) => {
  // 省市区(前端展示)
  form.value.fullLocation = ev.detail.value.join(' ')
  // 省市区(后端参数)
  const [provinceCode, cityCode, countyCode] = ev.detail.code!
  // 合并数据
  Object.assign(form.value, { provinceCode, cityCode, countyCode })
}
// #endif
// #ifdef H5 || APP-PLUS
const handleCityChange:UniHelper.UniDataPickerOnChange = (ev)=>{
  // 省市区(后端参数)
  const [provinceCode, cityCode, countyCode] = ev.detail.value.map(item=>item.value)
  // 合并数据
  Object.assign(form.value, { provinceCode, cityCode, countyCode })
}
// #endif

// 收集是否默认收货地址
const onSwitchChange: UniHelper.SwitchOnChange = (ev) => {
  form.value.isDefault = ev.detail.value ? 1 : 0
}
const handleSave = async ()=>{
  try{
    await formRef.value?.validate?.()
    if(query.id){
      // 有id，则走更新修改接口
      await updateAddressDetailApi(query.id, form.value)
    }else{
      // 没id，则走新增保存接口
      await saveAddressApi(form.value)
    }
    uni.showToast({
      icon: 'success',
      title: '保存成功！'
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 500);
  }catch{
    uni.showToast({
      icon: 'error',
      title: '请填写完整信息'
    })
  }
  
}

// 获取百度识别地址api的token
const token = ref()
const handleAddressApi = async ()=>{
  const res = await getAddressTokenApi({
    grant_type: 'client_credentials',
    client_id: 'ILCQE2LCUfzo5p3dS47KpY9F',
    client_secret: 'luj5fNYhTXUDOWnOSD74eWuBOj8U7pjn'
  })
  console.log('jinlaile', res)
  token.value = res.access_token
}
// 地址信息识别区域信息
const addressArea = ref()

// 识别请求事件
// 识别事件，调用api识别接口
const handleAddressIdentify = async ()=>{
  const result = await getAddressApi(token.value, {
    text: addressArea.value
  })
  // 收货人姓名
  form.value.receiver = result.person
  // 收货人手机号码
  form.value.contact = result.phonenum
  // 收货人所在地区(上海市 上海市 浦东新区)
  form.value.fullLocation = [result.province, result.city, result.county].join(' ')
  // 收货人所在地区的地区编码
  form.value.provinceCode = result.province_code
  form.value.cityCode = result.city_code
  form.value.countyCode = result.county_code
  // 收货人详情地址
  form.value.address = result.detail
}
onLoad(()=>{
  // 有id则加载详情数据
  getAddressData()
  // 获取百度识别地址api的token，以便识别地址时使用
  handleAddressApi()
})
</script>

<template>
  <view class="content">
    <uni-forms :rules="rules" :model="form" ref="formRef">
      <!-- 表单内容 -->
      <uni-forms-item class="form-item" name="receiver">
        <text class="label">收货人</text>
        <input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" />
      </uni-forms-item>
      <uni-forms-item class="form-item" name="contact">
        <text class="label">手机号码</text>
        <input class="input" placeholder="请填写收货人手机号码" v-model="form.contact" />
      </uni-forms-item>
      <uni-forms-item class="form-item" name="countyCode">
        <text class="label">所在地区</text>
        <!-- #ifdef MP-WEIXIN -->
        <picker class="picker" mode="region" :value="form.fullLocation.split(' ')" @change="onRegionChange">
          <view v-if="form.fullLocation">{{form.fullLocation}}</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
        <!-- #endif -->
        <!-- #ifdef H5 || APP-PLUS -->
        <uni-data-picker placeholder="请选择地址" popup-title="请选择城市" collection="opendb-city-china" field="code as value, name as text" orderby="value asc" :step-searh="true" self-field="code" parent-field="parent_code" :clear-icon="false" @change="handleCityChange" v-model="form.countyCode">
      </uni-data-picker>
        <!-- #endif -->
      </uni-forms-item>
      <uni-forms-item class="form-item" name="address">
        <text class="label">详细地址</text>
        <input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" />
      </uni-forms-item>
      <uni-forms-item class="form-item">
        <label class="label">设为默认地址</label>
        <switch class="switch" color="#db1818" :checked="form.isDefault === 1" @change="onSwitchChange"/>
      </uni-forms-item>
    </uni-forms>
  </view>
  <textarea
    v-model="addressArea"
    placeholder="请输入地址"
    placeholder-class="textarea-placeholder"
  />
  <button @tap="handleAddressIdentify">识别/提取</button>
  <!-- 提交按钮 -->
  <button class="button" @tap="handleSave">保存并使用</button>
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx 40rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #db1818;
}
</style>